<template>
    <view class="m-sign-box">
        <view class="m-sign-img-item" v-for="(item,index) of curValue">
            <my-icon class="m-sign-img-item-del" v-if="!readOnly" @click="onDelete(index)" size="1.2rem"
                     type="icon-icon-test26"></my-icon>
            <image :src="getImageUrl(item)"></image>
        </view>
    </view>
    <view class="m-sign-bottom" v-if="!readOnly">
        <div class="m-sign-button"  @click="openSignDialog"><my-icon type="icon-fillbrush_fill"></my-icon>{{i18n('clickSign','点击签名')}}</div>
        <div class="m-sign-button m-sign-button-light" @click="openSelectSignDialog">{{i18n('selectSignature','选择签名')}}</div>
    </view>
    <RxEmpty v-if="readOnly && curValue.length==0"></RxEmpty>
</template>
<script>
import MSignDialog from "./MSignDialog.vue";
import MForm from "../js/MForm.js";
import dayjs from "dayjs";
import 'dayjs/locale/zh-cn';
import TokenUtil from "../../../../common/TokenUtil";
import MyIcon from "../../../../components/myIcon";
import RxEmpty from "@/components/RxEmpty"
import Dialog from "@/js/Dialog";
dayjs.locale('zh-cn');
export default {
    name:'MSignature',
    components: {MyIcon,RxEmpty},
    mixins:[MForm],
    data(){
        return {
            signImg:'',
            curValue:[]
        }
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"componentsLang",key);
        },
        getTime(){
            let format = "YYYY-MM-DD HH:mm:ss";
            return dayjs().format(format);
        },
        openSelectSignDialog(){
            let obj = {
                curVm:this,
            }
            Dialog.MSignSelectDialog(obj,(data=>{
                let obj = {
                    'fileId': data,
                    'time': this.getTime(),
                    'userId': this.curUserId
                }
                this.saveSign(obj)
            }))
        },
        getImageUrl(file) {
            let fileId = file.fileId;
            let token = TokenUtil.getToken();
            let url =  this.realUrl() +`/api-system/system/core/sysFile/previewFile?fileId=${fileId}&accessToken=` + token;
            return url;
        },
        saveSign(obj){
            let { mode } = this.metadata.options ;
            if (mode === "single") {
                this.curValue = [obj];
            } else {
                let ary = this.curValue.filter(item => {
                    return item.userId === this.curUserId;
                })
                if (ary.length === 0) {
                    this.curValue.push(obj);
                } else {
                    Object.assign(ary[0], obj);
                }
            }
            this.updateValue(JSON.stringify(this.curValue))
            this.triggerEmitEvents('change', this.curValue, this.data)
        },
        openSignDialog(){
            // #ifdef H5
            this.$util.open({
                curVm:this,
                component:MSignDialog,
                data:{
                    curUserId:this.curUserId
                },
                zIndex:998
            },({action,data})=>{
                if(action === 'ok'){
                    this.saveSign(data)
                }
            })
            // #endif
            // #ifdef APP-PLUS
            let conf = {
                data:{
                    curUserId:this.curUserId
                },
                curVm:this
            }
            Dialog.RxSignDialog(conf,(data)=>{
                this.saveSign(data)
            })
            // #endif
        },
        setCurValue(val){
            let obj = new Function(`return ${val}`)()
            this.curValue = obj;
        },
        onDelete(index){
            this.curValue.splice(index,1)
            this.updateValue(JSON.stringify(this.curValue))
            this.triggerEmitEvents('change', this.curValue, this.data)
        }
    },
    watch: {
        value: {
            handler(val) {
                if (val) {
                    this.setCurValue(val)
                }
            },
            immediate: true
        }
    }
}
</script>
<style scoped>
.m-sign-box{
    display: flex;
    flex-wrap: wrap;
}
.m-sign-bottom{
    display: flex;
    margin-top: 0.5rem;
}
.m-sign-button:not(:last-child){
    margin-right: .4rem;
    flex: 1;
}
.m-sign-button{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem .6rem;
    border:1px solid rgba(232, 232, 232, 1);
    border-radius: .4rem;
}
.m-sign-button-light{
    background: rgba(66, 133, 244, 1);
    color: white;
}
.m-sign-img-item {
    border: 1px solid rgba(232, 232, 232, 1);
    border-radius: 5px;
    position: relative;
    height: 7rem;
    width: 100%;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.m-sign-img-item:not(:last-child){
    margin-right:10px;
}
.m-sign-img-item > image {
    max-width: 100%;
    height: 100%;
    object-fit: scale-down;
}
.m-sign-img-item-del {
    position: absolute;
    right: -0.3rem;
    top: -0.5rem;
    color: rgba(255, 81, 81, 1);
}
</style>
